<template>
  <div>
    <el-form ref="form" :model="q" label-width="110px" @submit.native.prevent>
      <el-card>
        <el-row style="padding-right: 2%">
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item :label="$t('faq.question')">
              <el-input size="small" v-model="q.queryQuestion" clearable @change="queryData()" :placeholder="$t('commonInput') + $t('faq.question')"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item :label="$t('faq.type')">
              <el-select size="small" style="width: 100%" v-model="q.type" clearable @change="queryData()" :placeholder="$t('commonSelect') + $t('faq.type')">
                <el-option :label="$t('faq.type1')" value="1"/>
                <el-option :label="$t('faq.type2')" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-button size="mini" icon="el-icon-plus" type="primary" v-if="isAuth('faq:save')" @click="editHandle()">{{$t('commonAdd')}}</el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" v-if="isAuth('faq:delete')" :disabled="dataSelect.length <= 0"
                     @click="deleteData('/faq/delete')">{{$t('commonDelete')}}</el-button>
          <span style="float:right; display: flex; align-items: center">
            <el-button size="mini" icon="el-icon-search" @click="queryData()">{{$t('commonQuery')}}</el-button>
          </span>
        </el-row>
      </el-card>
    </el-form>

    <el-table :data="dataList" ref="dataTable" stripe border v-loading="dataLoading" style="width: 100%;"
              @sort-change="(val) => orderSort(val)" @selection-change="(val) => selectionChange(val)">
      <el-table-column type="selection" width="40"/>
      <el-table-column align="center" width="50" :label="$t('commonSeq')">
        <template slot-scope="scope">{{(q.page - 1) * q.limit + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="question" :label="$t('faq.question')"/>
      <el-table-column align="center" min-width="100" prop="type" :label="$t('faq.type')">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.type === 1">{{$t('faq.type1')}}</el-tag>
          <el-tag type="danger" v-if="scope.row.type === 2">{{$t('faq.type2')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="100" prop="orderNum" :label="$t('faq.orderNum')"/>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="remark" :label="$t('faq.remark')"/>
      <el-table-column align="center" show-overflow-tooltip min-width="150" prop="createTime" :label="$t('commonCreateTime')"/>
      <el-table-column align="center" min-width="100" :label="$t('commonOperator')">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-if="isAuth('faq:info')" @click="detailHandle(scope.row.id)">{{$t('commonView')}}</el-button>
          <el-button size="mini" type="text" v-if="isAuth('faq:update')" @click="editHandle(scope.row.id)">{{$t('commonEdit')}}</el-button>
          <el-button size="mini" type="text" v-if="isAuth('faq:delete')" @click="deleteData('/faq/delete', scope.row.id)">{{$t('commonDelete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="(val) => sizeChange(val)" @current-change="(val) => currentChange(val)" :page-sizes="[10, 30, 50, 100]"
      :current-page="q.page" :page-size="q.limit" :total="q.totalCount" layout="total, sizes, prev, pager, next, jumper"/>

    <edit v-if="editVisible" ref="edit" @refreshDataList="reloadData()"/>

    <detail v-if="detailVisible" ref="detail"/>
  </div>
</template>

<script>
  import Edit from './faqEdit'
  import Detail from './faqDetail'
  export default {
    data () {
      return {
        q: this.getPage(),
        url: '/faq/list',
        dataList: [],
        dataSelect: [],
        dataLoading: false,
        detailVisible: false,
        editVisible: false
      }
    },
    components: {
      Detail,
      Edit
    },
    activated () {
      this.getTableData(this.url, this.q)
    },
    methods: {
    }
  }
</script>
